<script setup lang="ts">
import Son from "./components/Son.vue";
import HMButton from "./components/HMButton.vue";
import { ref, provide } from "vue";
function clickEvent(age: number) {
  console.log(age);
}

function getName(name: string) {
  console.log(name);
}
const money = ref(1000)
provide('totalMoney', money)
provide('updateTotalMoney', (num: number) => {
  money.value += num
})
</script>
<template>
  <div class="row">
    <!-- 父传子：通过 v-bind: 和 Props 传递数据 -->
    <!-- 子传父：通过 v-on: 和 emit 传递数据(传回调函数给子组件调用) -->
    <Son :name="'张三'" :age="18" @my-event="clickEvent($event)" @get-name="getName($event)"></Son>
    <Son :name="'张三'" :age="22" @my-event="clickEvent" @get-name="getName"></Son>
    <div class="cloumn">
      <HMButton :text="'点击购买'" />
      <HMButton :text="'快来买'" />
      <HMButton />
      <HMButton :text="'不买'" />
    </div>
  </div>
  <Button @click="money++">点击增加小钱钱</Button>
</template>
<style scoped>
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 10px;
}

.cloumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  column-gap: 10px;
}
</style>